<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    import { toRaw } from '@vue/reactivity'
    import 'ol/ol.css'
    import { Map, View } from 'ol'
    import TileJSON from 'ol/source/TileJSON'
    import { fromLonLat } from 'ol/proj'
    import Overlay from 'ol/Overlay.js'
    import Point from 'ol/geom/Point'
    import Feature from 'ol/Feature'
    import VectorSource from 'ol/source/Vector'
    import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'

    const state = reactive({
      map: null,
      mapBox: ref(null),
      beijingTxtBox: ref(null), // 文字特性容器
      beijingMarkerBox: ref(null), // 标记点特性容器
      popup: ref(null),
      shopPopup: false,
      pos: fromLonLat([116.41400, 39.91500]), // 北京坐标
      beijingMarker: null,
      beijingTxt: null,
      iconFeature: null,
      overlay: null,
      pointData: {
        id: '10000000',
        content: '这是创建图层时给这个点的数据'
      },
      pop: {} // 弹窗里的数据
    })
    const init = () => {
      // 创建北京坐标点文字特性
      state.beijingTxt = new Overlay({
        position: state.pos,
        element: state.beijingTxtBox,
        offset: [-25, 14]
      })

      // 创建北京坐标点圆点特性
      state.beijingMarker = new Overlay({
        position: state.pos,
        positioning: 'center-center', // 如果不配置，则圆的左上角和坐标点对其
        element: state.beijingMarkerBox,
        stopEvent: false // 不阻止默认事件，比如鼠标放到圆点上时，滚动鼠标滚轮，也可以缩放地图
      })

      // 创建点图层并添加到map
      state.iconFeature = new Feature({
        geometry: new Point(state.pos),
        name: '首都北京',
        population: 4000,
        rainfall: 500
      })
      state.iconFeature.setProperties(state.pointData, false)

      state.map = new Map({
        target: state.mapBox, // 视图容器id
        layers: [
          new VectorLayer({ // 创建矢量图层
            source: new VectorSource({ // 创建矢量容器，将图标特性添加进容器中
              features: [state.iconFeature]
            })
          }),
          new TileLayer({
            source: new TileJSON({
              url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
              crossOrigin: ''
            })
          })
        ],
        overlays: [state.beijingMarker, state.beijingTxt], // 也可以将标识这么添加
        view: new View({
          // 地图视图
          center: state.pos, // 北京坐标
          minZoom: 1, // 地图缩放最小级别
          zoom: 4 // 地图缩放级别（打开页面时默认级别）
        })
      })

      // state.map.addOverlay(state.beijingMarker) // 将圆点标识添加到地图
      // state.map.addOverlay(state.beijingTxt) // 将文字标识添加到地图

      mapPointermove()
    }

    const mapPointermove = () => {
      state.map.on('pointermove', function (evt) {
        // 创建弹窗并添加到Map
        state.overlay = new Overlay({
          element: state.popup,
          offset: [-180, -110]
        })
        state.map.addOverlay(state.overlay)

        // 鼠标放到图层时改变鼠标样式
        state.map.getTargetElement().style.cursor = state.map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : ''

        // 获取图层
        const feature = state.map.forEachFeatureAtPixel(evt.pixel, function (feature) {
          return feature
        })

        // 判断如果有图层时显示弹窗否则不显示
        if (feature) {
          state.shopPopup = true
          state.overlay.setPosition(evt.coordinate)
          state.pop = toRaw(feature.values_)
        } else {
          state.shopPopup = false
        }
      })
    }
    `
    return {
      code
    }
  }
}
</script>
